// # 登录对话框-显示
var loginObj = document.querySelector("header section > .member>div")
loginObj.onclick=function(){
    document.querySelector("section.login").style.visibility="visible"
}
// # 登录对话框-隐藏
var closeObj = document.querySelector("section.login .item p.close i")
closeObj.onclick = function(){
    document.querySelector("section.login").style.visibility="hidden"
    document.querySelector("section.login .item .form p:nth-of-type(3)").innerText=""
    document.querySelector("section.login .item .form p:nth-of-type(4)").innerText=""
    document.querySelector("section.login .item .form .captcha").innerText="获取验证码"
    document.querySelector("section.login .item .form input:nth-of-type(1)").value=""
    document.querySelector("section.login .item .form input:nth-of-type(2)").value=""

}

// # 登录对话框-蓝色区域拖拽
var tzObj=document.querySelector("section.login .item .menu")
tzObj.onmousedown = function(evt){
    var oldE = evt || window.event
    document.body.onmousemove = function(evt){
        var e = evt || window.event
        var divObj=document.querySelector("section.login .item")

        // 获取移动范围
        var tz_w = (window.innerWidth || document.documentElement.clientWidth)-divObj.offsetWidth
        var tz_h = (window.innerHeight || document.documentElement.clientHeight)-divObj.offsetHeight
        // 获取当前位置 鼠标在页面中的位置-鼠标在登录框上的位置
        var left1=e.clientX-oldE.offsetX
        var top1=e.clientY-oldE.offsetY
        
        // 设置边界
        if (left1<0) left1=0
        if (top1<0) top1=0
        if (left1>=tz_w) {left1=tz_w}
        if (top1>=tz_h) {top1=tz_h}

        // 设置行内样式
        divObj.style.position="absolute"
        divObj.style.top = top1+"px"
        divObj.style.left = left1+"px"
    }
    document.body.onmouseup = function() {
        document.body.onmousemove = null
    }
}





// # 登录倒计时
var yzmObj=document.querySelector("section.login .item .form .captcha")

// 点击显示
yzmObj.onclick=function(){
    var xwyzObj=document.querySelector("section.captcha")
    xwyzObj.style.visibility="visible"

}
// 点击关闭行为验证码
var closeObj=document.querySelector("section.captcha i")
closeObj.onclick=function(){
    document.querySelector("section.captcha").style.visibility="hidden"
}

// 滑块
var dragBtn=document.querySelector("section.captcha .drag .btn")

dragBtn.onmousedown=function(){

    document.body.onmousemove=function(evt){
        var dragObj=document.querySelector("section.captcha .drag")
        var e = evt || window.event
        var drag_width=dragObj.offsetWidth-dragBtn.offsetWidth/2
        // 获取鼠标移动位置
        var xwyzObj=document.querySelector("section.captcha")
        var left = e.clientX - (xwyzObj.offsetLeft - xwyzObj.offsetWidth/2) -dragBtn.offsetWidth
       
        // 设置边界
        if (left>drag_width) left=drag_width
        if (left<0) left=0
        // 设置行内样式
        dragBtn.style.left=left+"px"
        document.querySelector("section.captcha .check img:nth-of-type(2)").style.left=left+"px"

    }
}
// 鼠标松开事件
var yzData=false
document.body.onmouseup = function(){
    document.body.onmousemove = null
    // 判断验证码通过范围
    var value=parseInt(dragBtn.style.left)
    if (value>255&value<270){
        document.querySelector("section.captcha").style.visibility="hidden"
        yzData=!yzData
        // 获取验证码按钮
        var num=5
        yzmObj.disabled=true
        t=setInterval(function(){
            if (num<1){
                yzmObj.innerText="重新发送"
                num=5
                yzmObj.disabled=false
                clearInterval(t)
                return
            }
            yzmObj.innerText=num+"秒后重发"
            num--    
        },1000)
    }
    value=0
    dragBtn.style.left=value+"px"
    document.querySelector("section.captcha .check img:nth-of-type(2)").style.left=value+"px"
}

// # 登录表单验证
var loginBtn=document.querySelector("section.login .item .form .submit")
loginBtn.onclick=function(){
    // 核实手机号格式
    var phoneData=document.querySelector("section.login .item .form input:nth-of-type(1)")
    var tips_1=document.querySelector("section.login .item .form p:nth-of-type(3)")
    if (phoneData.value.length!=11 || parseInt(phoneData.value)!=phoneData.value){
        tips_1.innerText="请输入正确的手机号"
    }else{
        tips_1.innerText=""
    }
    // 核实验证码格式
    var yzmObj=document.querySelector("section.login .item .form input:nth-of-type(2)")
    var tips_2=document.querySelector("section.login .item .form p:nth-of-type(4)")
    if (yzmObj.value.length!=4 || parseInt(yzmObj.value)!=yzmObj.value){
        tips_2.innerText="请输入正确的验证码"
    }else{
        tips_2.innerText=""
    }
    if (tips_2.innerText==tips_1.innerText & yzData) {
        console.log("登录成功")
        document.querySelector("section.login .item .form p:nth-of-type(3)").innerText=""
        document.querySelector("section.login .item .form p:nth-of-type(4)").innerText=""
        document.querySelector("section.login .item .form .captcha").innerText="获取验证码"
        document.querySelector("section.login .item .form input:nth-of-type(1)").value=""
        document.querySelector("section.login .item .form input:nth-of-type(2)").value=""
        document.querySelector("section.login").style.visibility="hidden"
        yzData=!yzData
    }
}
